@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@

@(jobDefPair: IdUrlPair, results: java.util.Map[IdUrlPair, java.util.List[models.AppResult]], maxStages: Int,
    flowExecTimeList:java.util.List[Long])

@import com.linkedin.drelephant.analysis.Severity

@getSeverityColor(severity : Severity) = @{
  var color: String  = "#5cb85c"; // LOW or NONE

  if(severity.getText.equalsIgnoreCase("CRITICAL")) {
    color = "#d9534f"
  } else if(severity.getText.equalsIgnoreCase("SEVERE")) {
    color = "#e4804e"
  } else if(severity.getText.equalsIgnoreCase("MODERATE")) {
    color = "#f0ad4e"
  }

  color
}

@if(results != null && results.nonEmpty) {
  @tags.panel(){ Job History Results: <a href="@jobDefPair.getUrl" style="font-size:14px; color:#083d8d">@jobDefPair.getId</a>} {
    <script src="@routes.Assets.at("js/jobhistoryform.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("js/graphutility.js")" type="text/javascript"></script>

    <div>

      <!-- Performance Score Graph -->
      <div style='width:1078px; height:342px'>
        <img src='@routes.Assets.at("images/loading.gif")' id='loading-indicator' alt='Loading...'
        style='position:relative;left:50%;top:40%;display:none;'/>
        <svg id="visualisation" width="100%" height="100%" style="overflow:visible"></svg>
      </div>

      <hr>

      <!-- The tabular results -->
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover" style="table-layout:fixed;">

          <thead>
            <tr>
              <th style="width:200px">Job Executions</th>

              @for(i <- 1 to maxStages) {
                <th>Stage @i</th>
              }
            </tr>
          </thead>

          <tbody>
          @for((flowExecPair, jobs) <- results) {
            <tr>

              <!-- The First column, execution time -->
              <td style="text-align:center">
                <a class="exectime" href='@flowExecPair.getUrl' data-toggle='tooltip' title='@flowExecPair.getUrl'>Loading...</a>
              </td>

              <!-- The remaining columns -->
              @for(i <- 1 to maxStages) {
                <td>
                @if(i <= jobs.length) {
                  @for((appHeuristicResult, jobCount) <- jobs(i-1).yarnAppHeuristicResults.zipWithIndex) {
                    <a class="hasTooltip" href='@routes.Application.search()?id=@appHeuristicResult.yarnAppResult.id'
                    style='color: @getSeverityColor(appHeuristicResult.severity);'>&#9673;
                      <!-- Table Tooltip Content -->
                      <div id="tooltip-div">
                        <p><b>@appHeuristicResult.yarnAppResult.id</b></p>
                        <p><b>@appHeuristicResult.heuristicName</b></p>
                        <table class="list-group-item-text table table-condensed" style="color:black;">
                          <tbody>
                          @for(appHeuristicResultDetail <- appHeuristicResult.yarnAppHeuristicResultDetails) {
                            <tr>
                              <td>@appHeuristicResultDetail.name</td>
                              <td>@appHeuristicResultDetail.value</td>
                            </tr>
                          }
                          </tbody>
                        </table>
                      </div>
                    </a>
                  }
                }
                </td>
              }

            </tr>
          }
          </tbody>

        </table>
      </div>
    </div>
  }
}